<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax  数据请求</title>
</head>
<body>
    <ul id="members"></ul>
    <script>
    // js 异步主动请求数据 界面的动态更新
    // console.log(fetch('https://api.github.com/orgs/lemoncode/members'))
    // url 接口地址
    // 网络请求 request 
    // response
    // toJSON
    // dom
    // httpRequest XML? 可以主动发起http 请求响应是(XML) JSON对象
    const xhr =new XMLHttpRequest();
    console.log(xhr.readyState);
    // 打开一个请求
    // false 同步请求  true 异步请求
    xhr.open('GET','https://api.github.com/orgs/lemoncode/members',false);
    console.log(xhr.readyState);
    // 真正的发送出去
    xhr.send();
    console.log(xhr.readyState);
    // 事件监听
    xhr.onreadystatechange = function(){
        console.log(xhr.readyState);
        // 响应的状态码
        // readyState 4 表示请求完成
        if(xhr.status ===200&& xhr.readyState ===4){
            // 成功
            console.log(xhr.responseText);
        }
        const data=JSON.parse(xhr.responseText);
        console.log(data);
        document.getElementById('members').innerHTML = data.map(item=>`
        <tr>
            <li>${item.login}</li>
        </tr>
        `).join('');
    }
    </script>
</body>
</html>